import * as React from 'react'
interface Props {
  sliders: any[]
}
interface State {
  selectedIndex: number
}
export default class SwiperDots extends React.Component<Props, State> {
  state = {
    selectedIndex: 0
  }
  changeIndex = (selectedIndex) => {
    this.setState({ selectedIndex })
  }
  render() {
    let { sliders } = this.props
    return (
      <div className="dots">
        {
          sliders.map((item, index: number) => {
            return <span key={index} className={"dot " + (this.state.selectedIndex === index ? 'active' : '')}></span>
          })
        }
      </div>
    )
  }
}
